<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>首页</title>
	</head>
	<body id="first">
		<main>
			<!-- 首页轮播图 -->
			<div class="swiper first-swiper">
				<div class="swiper-wrapper">
					<div class="swiper-slide slider1"></div>
					<div class="swiper-slide slider2"></div>
					<div class="swiper-slide slider3"></div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
			</div>
			<!-- 排名与今日打卡 -->
			<section id="main1">
				<div id="rank">
					今日排名
					<span>9</span>
				</div>
				<div id="clock">
					累计打卡<span>3</span>天
					<button type="button" id="clockBtn">今日打卡</button>
				</div>
			</section>
			<!-- 运动数据和徽章 -->
			<section id="main2">
				<div id="sportData">运动数据</div>
				<div id="badge">
					累计运动勋章
					<div>3</div>
					<span>枚</span>
				</div>
			</section>
			<!-- 课程训练 -->
			<section id="main3">课程训练</section>
			<!-- 户外跑步 -->
			<section id="main4">户外跑步</section>
		</main>
		<!-- 底部导航 -->
		<nav id="tabbar"></nav>
	</body>
</html>
